<!--
 * @Author: wjc
 * @Date: 2025-06-18 09:09:53
 * @LastEditors: wjc
 * @LastEditTime: 2025-09-26 14:52:22
 * @Description: 锁屏弹窗组件
-->
<template>
  <Modal :footer="false" :fullscreen-button="false" title="锁定屏幕">
    <div
      class="mb-10 flex w-full flex-col items-center px-10"
      @keydown.enter.prevent="handleSubmit"
    >
      <div class="w-full">
        <div class="ml-2 flex w-full flex-col items-center">
          <NiceAvatar
            :src="avatar"
            class="size-20"
            dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
          />
          <div class="text-foreground my-6 flex items-center font-medium">
            {{ text }}
          </div>
        </div>
        <Form />
        <NiceButton class="mt-1 w-full" @click="handleSubmit">锁定</NiceButton>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
  import type { Recordable } from '@nice/types'

  import { NiceAvatar, NiceButton, useNiceModal } from '@nice/nice-ui'
  import { useVbenForm, z } from '@vben-core/form-ui'

  interface Props {
    avatar?: string
    text?: string
  }

  defineOptions({
    name: 'LayoutLockScreenModal',
  })

  withDefaults(defineProps<Props>(), {
    avatar: '',
    text: '',
  })

  const emit = defineEmits<{
    submit: [Recordable<any>]
  }>()

  const [Form, { resetForm, validate, getValues }] = useVbenForm(
    reactive({
      commonConfig: {
        hideLabel: true,
        hideRequiredMark: true,
      },
      schema: computed(() => [
        {
          component: 'NiceInputPassword' as const,
          componentProps: {
            placeholder: '请输入锁屏密码',
          },
          fieldName: 'lockScreenPassword',
          formFieldProps: { validateOnBlur: false },
          label: '密码',
          rules: z.string().min(1, { message: '请输入锁屏密码' }),
        },
      ]),
      showDefaultActions: false,
    })
  )

  const [Modal] = useNiceModal({
    onConfirm() {
      handleSubmit()
    },
    onOpenChange(isOpen: boolean) {
      if (isOpen) {
        resetForm()
      }
    },
  })

  async function handleSubmit() {
    const { valid } = await validate()
    const values = await getValues()
    if (valid) {
      emit('submit', values?.lockScreenPassword)
    }
  }
</script>
